<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow">
        <div>
          <a-form size="small" :model="pageData" layout="inline">
            <a-form-item label="坯布编号">
              <a-input class="bacClass" :style="{ width: '200px' }" v-model="pageData.greyCode"
                       :allowClear="true"></a-input>
            </a-form-item>
            <a-form-item label="坯布名称">
              <a-input class="bacClass" :style="{ width: '200px' }" v-model="pageData.greyName"
                       :allowClear="true"></a-input>
            </a-form-item>
          </a-form>
        </div>
        <div class="my-tool-bar" style="float: right;">
          <Toolbar :items="pageData.btnList" @select="selectHandler">
          </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18"/>
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18"/>
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999 ;">
        <div style="width: 100%; height: 100%">
          <encapsulation-agrid ref="table1Ref" :configaggrid="configTable1"></encapsulation-agrid>
        </div>
      </a-spin>
    </template>
    <a-drawer style="z-index:999" ok-text='保存' cancel-text='关闭' :drawer-style="{ 'zIndex': 999 }"
              :mask-closable="false"
              :width="400" unmount-on-close popup-container=".arco-tabs-content" height="100%"
              :visible="pageData.showAdd"
              @ok="sideOk" @cancel="pageData.showAdd = false" :ok-loading="pageData.pageLoading">
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <div>
        <a-form ref="formRef" layout="horizontal" :model="dataForm">
          <a-form-item field="washDay" label="洗机天数" label-col-flex="100px"
                       :rules="[{required:true,message:'洗机天数必填'}]" :validate-trigger="['change', 'blur']">
            <a-input-number v-model="dataForm.washDay" :min="0" :max="100" :precision="0"
                            style="width: 100%"></a-input-number>
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>

  </pageTabelLayout>
</template>

<script lang="ts" setup>
import {post, get} from "@/api/http";
import {
  useTable,
  useRowKey,
  usePagination,
  useRowSelection,
} from "@/hooks/table";
import {localeText} from '@/api/aggridZw'
import {ref, reactive, onMounted} from "vue";
import Toolbar from "@/components/Toolbar.vue";
import {Form, Message, Modal} from "@arco-design/web-vue";
import {FormInstance} from "@arco-design/web-vue/es/form";
import validate from "@/hooks/useValidate";
import usePermission from '@/store/modules/permission'
import tableColumns from '@/views/StandardWashingDays/tableConfig/tableColumns'
import emitter from '@/hooks/useEventBus'

const pageData = reactive<{
  showAdd: boolean
  pageLoading: boolean,
  greyCode: any,
  greyName: any,
  state: any,
  nameOpen7: any
  nameOpen2: any
  nameOpen1: any
  sideTitle: any
  rHeight: number | undefined,
  dropDownData: any
  btnList: any
  isEdit: boolean
}>({
  showAdd: false,
  pageLoading: false,
  greyCode: '',
  greyName: '',
  state: 2,
  nameOpen7: [],
  nameOpen2: [],
  nameOpen1: [],
  sideTitle: "修改",
  rHeight: 0,
  dropDownData: "",
  btnList: [],
  isEdit: true
});
const dataForm = reactive({
  id: '',//当前修改行的行id
  washDay: 0,
});
const table1Ref = ref<any>(null)
let configTable1 = {
  url: 'planSingle/washDay/getPage', //接口路径
  queryData: {
    greyCode: pageData.greyCode,
    greyName: pageData.greyName,
  },
  paginationShow: true, //分页是否显示
  invokeiIterface: true, //是否调用接
  rowMultiSelectWithClick: true, //点击行是否多选
  column: tableColumns,
  fileName: 'StandardWashingDays-1'
}

const headerShow = ref<boolean>(true)
//查询
const scrollbar = ref(true)

function PageSize(val: any) {
  pagination.page = val
  doRefresh();
}

const total = ref(0);
const page = ref(1);
const size = ref(10);

function change1(val: any) {
  pagination.pageSize = val
  doRefresh();
}

function doRefresh() {
  table1Ref.value.setQuery({
    greyCode: pageData.greyCode,
    greyName: pageData.greyName,
  })
}

const {selectedRowKeys, onSelectionChange} = useRowSelection();
const pagination = usePagination(doRefresh);
const table = useTable();
const rowKey = useRowKey("id");
//检验表单是否含有中文的方法
const hasChiese = validate.includeChinese;

const scroll = {
  x: 2000,
  y: 200
};
const tablediv = ref(null)


onMounted(() => {
  console.log(permissionStore.hasPermisson('xjbzts.cx'))
  pageData.rHeight = document.getElementsByClassName("arco-tabs-content")[0]?.clientHeight

  //弹出层的高
  if (pageData.rHeight !== undefined) {
    pageData.rHeight = pageData.rHeight - 100;
  }
  window.addEventListener('resize', () => {
    pageData.rHeight = document.getElementsByClassName("arco-tabs-content")[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
      pageData.rHeight = pageData.rHeight - 100;
    }
  })
  doRefresh();
});
let cxbl = ""
//查询
const selectHandler = () => {
  pagination.page = 1
  cxbl = pageData.dropDownData
  doRefresh();
}
const queryData = reactive({
  clothType: "",
});
const formRef = ref<FormInstance>();
const sideOk = () => {
  formRef.value?.validate().then(async (err) => {
    if (!err) {
      try {
        pageData.pageLoading = true
        const res = await post({
          url: "planSingle/washDay/updateWashDayById",
          data: {
            id: dataForm.id,
            washDay: dataForm.washDay
          }
        })
        if (res.code === 200) {
          formRef.value?.resetFields();
          pageData.showAdd = false;
          Message.success({
            content: "修改成功",
            duration: 5000,
          });
          doRefresh();
        } else {
          Message.error({
            content: res.message,
            duration: 5000,
          });
        }
      } catch (e) {
        console.log(e)
      } finally {
        doRefresh();
        pageData.pageLoading = false
      }

    }
  });
};
const deleteHandler = () => {
  if (table1Ref.value.getSelectedRows() === 0) {
    Message.error('请先勾选');
    return
  }
  Modal.confirm({
    title: "系统提示",
    content: "确认删除选中的数据?",
    onOk() {
      pageData.pageLoading = true
      post({
        url: "/qms/AdjustmentType/delete",
        //data: selectedRowKeys.value,
        data: table1Ref.value.getSelectedRows().map((o: any) => {
          return o.id
        })
      }).then(({code, message}: any) => {
        if (code === 200) {
          Message.success({
            content: "删除成功",
            duration: 5000,
          });

          pagination.page = 1
          doRefresh();

        } else {
          Message.error({
            content: message,
            duration: 5000,
          });
        }

      }).finally(() => {
        pageData.pageLoading = false
      })
    },
  });
};
emitter.on('standard-washing-days-editHandle', (data: any) => editHandler(data))
const editHandler = (record: any) => {
  for (var key in record) {
    dataForm[key] = record[key]
  }
  pageData.sideTitle = '修改'
  pageData.showAdd = true
};
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
  //flex: 1
}
const localeText1: any = ref(localeText)
const huiche = () => {
  doRefresh();
}
//设置权限
// ['查询', '新增', '删除', '导出', '导入']
const permissionStore = usePermission()

if (permissionStore.hasPermisson('xjbzts.cx')) {
  pageData.btnList.push('查询')
}
if (permissionStore.hasPermisson('xjbzts.xg')) {
  pageData.isEdit = true
}
</script>

